import React, {useContext, useState} from "react";
import { App } from "antd";

import prompt from "vendor/utils/prompt";
// import { NPanel } from "@/components/ui";
import { IconTransparency, IconZoomIn, IconCenter, IconZoomOut, IconPrompt, IconRanging, IconClear } from "@/icon";

import { MapCtx } from "../ctx";

const MapTool: React.FC = () => {
    const { cesiumUtil } = useContext(MapCtx).gisMapStore;
    const [ transparencyVisible, setTransparencyVisible ] = useState(false);
    const { modal } = App.useApp();
    const { zoomController, mouse } = cesiumUtil;

    return <div
        className="absolute flex flex-col items-center"
        // bodyClassName="flex flex-col items-center"
        style={{
            bottom: 30,
            right: 10,
            zIndex: 0,
            padding: "8px 5px"
        }}
        // bodyStyle={{padding: "8px 5px"}}
    >
        <IconZoomIn title="放大" style={commonStyle} onClick={() => zoomController.zoomIn()} />
        {/*<IconCenter title="中心" style={commonStyle} onClick={leafletUtil.restoreMapInitCenter} />*/}
        <IconZoomOut title="缩小" style={commonStyle} onClick={() => zoomController.zoomOut()} />
        <IconRanging title="测距" style={commonStyle} onClick={() => {
            prompt.warn("注意:鼠标右键结束!");
            mouse.measure.drawLine();
        }}/>
        {/*<IconClear title="清除" style={commonStyle} onClick={leafletUtil.clearMap} />*/}
        {/*<IconTransparency title="透明度" style={commonStyle} onClick={() => setTransparencyVisible(!transparencyVisible)} />*/}
        <IconPrompt title="说明" style={{...commonStyle, marginBottom: 0}} onClick={() => {
            modal.info({
                title: "说明",
                content: <span style={{fontSize: 14}}>地图引用高德地图服务</span>,
                okText: "确定",
            })
        }} />
    </div>
}

export default MapTool;

const commonStyle:React.CSSProperties = {
    marginBottom: 8,
    fontSize: 18,
    cursor: "pointer",
}